<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button @click="greet">按钮</button>


        <div id="inline-handler">
            <button @click="say('hi'), greet()">Say hi</button>
            <button @click.once="say('hi'), greet()">Say hi once</button>
            <!-- click.once 一次访问只可点击一次 刷新后可重置-->
            <button @click="say('what')">Say what</button>
        </div>

        <form action="/aaa" method="post" @submit.prevent="onSubmit">
            <!-- 加上submit.prevent 就是拒绝发送，处理方式在onSubmit函数中处理 -->
            <input v-model="user.username" type="text" name="username"><br>
            <input v-model="user.password" type="password" name="password"><br>
            <input type="submit" value="提交">
        </form>

        <input @keyup.alt.enter="clear" />
        <!-- 
            .enter
            .tab
            .delete (捕获“删除”和“退格”键)
            .esc
            .space
            .up
            .down
            .left
            .right
        -->

    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const App = {
            data() {
                return {
                    name: "Defalt",
                    user: {
                        username: null,
                        password: null,
                    },
                }
            },
            mounted() {

            },
            methods: {
                greet() {
                    // `methods` 内部的 `this` 指向当前活动实例
                    alert('Hello ' + this.name + '!')
                    // `event` 是原生 DOM event
                    // if (event) {
                    //     alert(event.target.tagName)
                    // }
                },
                say(message) {
                    alert(message)
                },
                onSubmit() {
                    console.log(this.user)
                },
                submit() {
                    console.log("this is enter.")
                },
                clear() {
                    this.user.username = null
                    this.user.password = null
                }
            }
        }
        Vue.createApp(App).mount("#app")
    </script>
</body>

</html>